<template>
  <div>
    <van-sidebar v-model="activeKey">
      <van-sidebar-item title="推荐" />
      <van-sidebar-item title="排行榜" />
      <van-sidebar-item title="分类" />
      <van-sidebar-item title="完本" />
    </van-sidebar>
  </div>
</template>

<script>
import Vue from 'vue'
import { Sidebar, SidebarItem } from 'vant'

Vue.use(Sidebar)
Vue.use(SidebarItem)
export default {
  data() {
    return {
      activeKey: 0,
    }
  },
}
</script>

<style lang="scss" scoped>
.van-sidebar{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .van-sidebar-item{
        width: 24%;
        text-align: center;
    }
    .van-sidebar-item--select::before{
        background-color: rgb(241, 221, 163);
    }
    .van-sidebar-item--select{
        background-color: rgb(241, 221, 163);
        border: none;
    }
    
}
</style>